import React, { Component } from 'react';
import { View, Text, ScrollView } from 'react-native';
import _ from 'lodash';
import { observer } from 'mobx-react';
import { Scene, Actions } from 'react-native-router-flux';
import Button from '../../../components/Button';
import Header from './header';
import Account from './account';
import Institution from './institution';
import Features from './features';
import System from './system';
import styles from './styles';
import user from '../../../common/models/user'
import navBarStyle from '../../../components/navBarStyle';

@observer
class PersonalOverview extends Component {
  constructor(props) {
    super(props);
  }
  removeCustomers = () => {
    storage.clearMapForKey('customers');
    storage.getAllDataForKey('customers');
    storage.remove({
      key: 'customers'
    });
  };
  logout = () => {
    this.removeCustomers();
    this.props.user.logout();
  };
  render() {
    return (
      <View style={styles.wrap}>
        <Header
          data={this.props.user.userInfo}
        />
        <ScrollView style={{ flex: 1 }}>
          <Account user={this.props.user} data={this.props.user.userInfo} />
          <Institution data={this.props.user.userInfo} status={this.props.user.applyStatus} />
          <Features data={this.props.user.smsTemplate} />
          <System />
          <View style={styles.logout}>
            <Button type="cancel" onPress={this.logout} title="退出" />
          </View>
        </ScrollView>
      </View>
    );
  }
}
module.exports = [
  <Scene
    key="personalOverview"
    component={PersonalOverview}
    title="个人中心"
    path="/personal"
    user={user}
    {...navBarStyle}
    onEnter={user.init.bind(user)}
  />
];
// export default PersonalOverview;
